<template>
  <view>
    <VNavbar />
    <view
      class="drop-down mb-30rpx h-88rpx flex items-center justify-between bg-#fff px-24rpx text-28rpx"
    >
      <view
        v-for="item in menu"
        :key="item.type"
        class="flex items-center"
        @tap="showPopup(item)"
      >
        <text class="mr-8rpx pb-8rpx">
          {{ item.name }}
        </text>
        <up-icon color="#4e5969" size="16rpx" name="arrow-down-fill" />
      </view>
    </view>
    <JobList :job-list="jobList" />
    <up-popup
      :show="popupData.show"
      mode="center"
      :safe-area-inset-bottom="false"
      bg-color="transparent"
      @close="close"
      @open="open"
    >
      <view class="w-662rpx overflow-hidden rounded-24rpx bg-#fff">
        <view class="relative h-106rpx flex items-center justify-end px-24rpx">
          <text
            class="absolute left-50% top-50% translate-[-50%] text-center text-[28rpx] text-[#1d2129] font-medium"
          >
            {{ popupData.title }}
          </text>
          <up-icon
            :name="PopupClose"
            color="#f2f2f2"
            size="44rpx"
            @tap="popupData.show = false"
          />
        </view>
        <view>
          <!-- 城市/职位/学历分类 -->
          <SecondaryCategory
            v-if="['1', '2'].includes(popupData.menuType)"
            :list="secondaryCategoryList"
            @getSearchList="getSearchList"
          />
          <view v-else class="py-24rpx">
            <view class="text-center py-24rpx" v-for="item in secondaryCategoryList" @click="selectData(item)">
              {{item.name}}
            </view>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup lang="ts">
import VNavbar from './components/v-navbar.vue';
import SecondaryCategory from './components/secondary-category.vue';
// import PopupClose from '@/static/images/common/popup-close.png';
import JobList from '@/pages/components/jobList/index.vue';
import {userJobList, userJobType} from '@/api/user';
// import home06 from "@/static/images/tab/home-06.png";
// import home10 from "@/static/images/tab/home-10.png";
  const PopupClose = 'https://yiliao.test03.qcw800.com/static/images/common/popup-close.png'
  const home06 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-06.png'
  const home10 = 'https://yiliao.test03.qcw800.com/static/images/tab/home-10.png'
const options = ref<Record<string, string>>({});
import cityList from '@/pages/components/infocard/pca-code.json'
interface MenuItem {
  type: string;
  name: string;
  showPopup: boolean;
}

const menu = ref<Array<MenuItem>>([
  {
    name: '专业目录',
    type: '1',
    showPopup: true,
  },
  {
    name: '城市',
    type: '2',
    showPopup: true,
  },
  {
    name: '学历',
    type: '3',
    showPopup: true,
  },
  {
    name: '职位性质',
    type: '4',
    showPopup: true,
  },
]);
type List = { name: string; children: { name: string }[] }[];
// 城市列表

// 职位分类列表
const classificationList = [
  {
    name: '全部',
    code: ''
  }
];
// 职位性质
const natureList = ref([])
// 学历
const educationList = ref([]);
const secondaryCategoryList = ref<List>([]);
const popupData = reactive({
  show: false,
  title: '',
  menuType: '',
});
const showPopup = (item: MenuItem) => {
  if (item.showPopup) {
    popupData.title = item.name;
    popupData.menuType = item.type;
    popupData.show = true;
    if (item.type === '1') {
      secondaryCategoryList.value = classificationList;
    }
    if (item.type === '2') {
      secondaryCategoryList.value = cityList;
    }
    if (item.type === '3') {
      secondaryCategoryList.value = educationList.value;
    }
    if(item.type === '4') {
      secondaryCategoryList.value = natureList.value
    }
  }
};
const selectData = (item: any) => {
  console.log(item, popupData.menuType)
  // 学历传这个  qualifications   例：大专（单选）
  // 职位性质   nature   例：全职
  if(popupData.menuType === '3') {
    params.qualifications = item.name
  }else {
    //职位性质
  }
  getJobList(params)
}
const close = () => {};
const open = () => {};

const jobList:any = reactive([]);
async function getJobList(params:any) {
    let result = await userJobList(params);
    console.log('找工作职位列表 res list:::', result);
    //vue3传递result的值到子组件JobList中的属性jobList中
    jobList.splice(0, jobList.length);
    for (let i = 0; i < result.list.length; i++) {
      const r = result.list[i]
      let rr = {
        job_name: r.name,
        job_id: r.id,
        salary_min: r.salary_min,
        salary_max: r.salary_max,
        salary_count: r.salary_count,
        province: r.province.name,
        city: r.city.name,
        job_nature: r.nature,
        qualifications: '',
        highlights: r.highlights,
        company_id: r.company.id,
        company_logo: r.company.url_logo,
        company_name: r.company.name,
        company_type: r.company.type == 1 ? '民营' : r.company.type == 2 ? '国企' : '合资',
        company_listed: r.company.listed == 1 ? '未上市' : '上市',
        like: r.like,
        like_img: r.like == 1 ? home06 : home10,
        hr_avatar: r.user.avatar,
        hr_name: r.user.name,
        hr_duty: r.user.hr.duty.name,
        hr_id: r.user.id,
      }
      let qualifications = ''
      for (let j = 0; j < r.qualifications.length; j++) {
        qualifications += r.qualifications[j] + ' '
      }
      rr.qualifications = qualifications
      jobList.push(rr)
    }
  }
  const params = reactive({})
const getSearchList = (value) => {
  params.status = 1
  if(value.type === 'zhiye') {
    params.position_id = value.value[0].code === '' ? value.value[0].code : value.value[1].code
  }
  if(value.type == 'gangWei') {
    params.salary_min = value.money
    params.majors_id = value.education.id
    params.company_type = value.education.company_type
  }
  if(value.type === 'city') {
    params.province_id = value.value[0].code
    params.city_id = value.value[0].code === '' ? '' : value.value[1].code
  }
  popupData.show = false;
  getJobList(params)
  // let params = {
  //   status: '', //职位状态 1招聘中 2已关闭 3未过审
  //   name: options.searchText,
  //   position_id: '', //职位id
  //   salary_min: '', //最小值
  //   salary_max: '', //最大值
  //   qualifications: '', //学历要求
  //   company_type: '', //企业类型
  //   majors_id: '', //专业id
  //   company_id: '', //公司id
  //   job_name: '', //职位名称
  // }
  // console.log(params)
}
const getUserJobType = async () => {
  let res = await userJobType();
  if(res) {
    res.map(v => {
      if(v.pid === 0) {
        classificationList.push({
          name: v.content,
          code: v.id,
          children: []
        })
      }
    })
    res.map(v => {
      classificationList.map(item => {
        if(classificationList.filter(vx => vx.code === v.id)) {
          if(item.code === v.pid) {
            item.children.push({
              name: v.content,
              code: v.id
            })
          }
        }
      })
    })
  }
}
onLoad((params: any) => {
  options.value = params;
  jobList.splice(0, jobList.length);
  //暂时初始化调用  需要搜索逻辑附加条件后调用
  params.job_name = options.value.searchText
  getJobList(params)
  getUserJobType()
  let storage = JSON.parse(uni.getStorageSync('config')).configCli
  educationList.value = storage.config_qualification$$学历配置.map(v => {
    return {
      name: v.value,
      code: v.key
    }
  })
  natureList.value = storage.config_job_nature$$职位性质.map(v => {
    return {
      name: v.value,
      code: v.key
    }
  })
  console.log('_-----------______--------', educationList.value, natureList.value)
});
</script>

<style scoped lang="scss"></style>
